<template>
	<Layout>
		<template #title>订单详情</template>
		<view class="inline-flex fill header">
			<image class="header__bg" src="/static/image/mine/order-detail.bg.png"></image>
			<image v-if="detail.orderStatus === 'Completed'" class="header__star-success"
				src="/static/image/mine/star-success.png"></image>
			<view class="inline-flex column header__tip">
				<text class="header__tip__status">{{orderStatusFormat(detail.orderStatus)}}</text>
				<text class="header__tip__desc">
					本次订单{{orderStatusFormat(detail.orderStatus)}}~
				</text>
			</view>
		</view>

		<InfoBlock header :customStyle="{zIndex:1,marginTop:'236rpx'}">
			<template #header>律师函代写服务</template>
			<InfoBlockItem color="rl">
				<template #label>支付方式</template>
				微信支付
			</InfoBlockItem>

			<InfoBlockItem color="rl">
				<template #label>订单状态</template>
				{{orderStatusFormat(detail.orderStatus)}}
			</InfoBlockItem>

			<InfoBlockItem color="rl">
				<template #label>联系电话</template>
				{{detail.contactPhone}}
			</InfoBlockItem>

			<InfoBlockItem color="rl">
				<template #label>用户名称</template>
				{{detail.userName}}
			</InfoBlockItem>
		</InfoBlock>

		<InfoBlock>
			<InfoBlockItem color="rr">
				<template #label>订单编号</template>
				{{detail.orderNumber}}
				<image @click.stop="tapCopyOrderNumber" src="/static/image/other/copy.png"
					style="width:30rpx; height: 29rpx;margin-left: 15rpx;">
				</image>
			</InfoBlockItem>

			<InfoBlockItem color="rr">
				<template #label>下单时间</template>
				{{detail.orderTime}}
			</InfoBlockItem>

			<InfoBlockItem color="rr">
				<template #label>付款时间</template>
				{{detail.paymentTime}}
			</InfoBlockItem>

			<InfoBlockItem color="rr">
				<template #label>完成时间</template>
				{{detail.completionTime}}
			</InfoBlockItem>
		</InfoBlock>
	</Layout>
</template>

<script lang="ts" setup>
	import Layout from '@/components/layout/layout.vue';
	import InfoBlock from '@/components/info-block/info-block.vue';
	import InfoBlockItem from '@/components/info-block/info-block-item.vue';
	import { ref } from 'vue';
	import type { AnyObj } from '@/types/global';
	import { getOrderDetail } from '@/apis/trade';
	import { onLoad } from '@dcloudio/uni-app';
	import { orderStatusFormat } from '@/utils/format';


	let orderId = '';
	const detail = ref<AnyObj>({});

	function loadData() {
		getOrderDetail(orderId).then((res) => {
			detail.value = res.data ?? {};
		});
	}

	function tapCopyOrderNumber() {
		uni.setClipboardData({
			data: detail.value.orderNumber,
			success: function () {
				uni.showToast({
					title: '复制成功',
					icon: 'none'
				})
			}
		})
	}

	onLoad((option) => {
		option = option as { orderId : string; };
		orderId = option.orderId;
		loadData();
	});
</script>

<style scope lang="scss">
	.header {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;

		&__bg {
			width: 100%;
			height: 286rpx;
		}

		&__star-success {
			position: absolute;
			top: 58rpx;
			right: 60rpx;
			width: 135rpx;
			height: 122rpx;
		}

		&__tip {
			position: absolute;
			top: 62rpx;
			left: 45rpx;

			&__status {
				color: #ffffff;
				font-family: "PingFang SC";
				font-size: 44rpx;
				font-style: normal;
				font-weight: 600;
				line-height: normal;
			}

			&__desc {
				margin-top: 16rpx;
				color: #ffffff;
				font-family: "PingFang SC";
				font-size: 28rpx;
				font-style: normal;
				font-weight: 400;
				line-height: normal;
			}
		}
	}
</style>